<template>
  <div class="about">
    <ul>
      <li v-for="item in reslist" :key="item.id">{{ item }}</li>
    </ul>

    <div class="foot">
      <div class="left">
        每页
        <select name="" id="" v-model="pagesize">
          <option :value="2">每页2条</option>
          <option :value="3">每页3条</option>
          <option :value="4">每页4条</option>
          <option :value="5">每页5条</option>
          <option :value="10">每页10条</option>
        </select>
        条 共有{{ list.length }}条
      </div>
      <page
        class="right"
        :total="list.length"
        :pagesize="pagesize"
        @currentchange="changepage"
      ></page>
    </div>
  </div>
</template>
<script>
import page from "../components/Page.vue";
export default {
  data() {
    return {
      list: [
        { id: 1, title: "宝，我今天输液了，想你的夜", price: 200 },
        {
          id: 2,
          title: "你有打火机吗，没有，那你是怎么点燃我的心的",
          price: 200,
        },
        {
          id: 3,
          title: "可以跟你问个路吗，去你心里的路",
          price: 300,
        },
        {
          id: 4,
          title: "可以买个地吗，买你的死心塌地",
          price: 500,
        },
        {
          id: 5,
          title: "宝，我打疫苗了，爱你的每一秒",
          price: 200,
        },
        {
          id: 6,
          title: "宝，我做核酸了了，得不到你的心酸",
          price: 200,
        },
        {
          id: 7,
          title: "宝，我去吃饭了，吃的什么饭，想让你乖乖就范",
          price: 200,
        },
        {
          id: 8,
          title: "宝，我要去考试了，考什么试，我们的生生世世",
          price: 200,
        },
        {
          id: 9,
          title: "宝，我在吃药，吃的什么药，你的最最重要",
          price: 200,
        },
        {
          id: 10,
          title: "宝，我今天去工地搬了一天砖，我的专一都给你",
          price: 200,
        },
      ],
      pagesize: 3,
      pagenum: 1,
    };
  },
  components: {
    page,
  },

  methods: {
    changepage(i) {
      console.log(i);
      this.pagenum = i;
    },
  },
  computed: {
    reslist() {
      return this.list.slice(
        (this.pagenum - 1) * this.pagesize,
        this.pagenum * this.pagesize
      );
    },
  },
};
</script>
<style lang="scss">
.foot {
  width: 100%;
  display: flex;
  .left {
    width: 300px;
  }
  .right {
    flex: 1;
  }
}
</style>
